<template>
  <div 
    @click="onOpen" 
    class="mx-vector" 
    :class="{'is-notAuto': currentSize}" 
    :style="currentStyle" 
    v-html="currentSvg">
  </div>
</template>

<script>
import basic from "./basic.vue";
import common from "../common.js";
import _ from 'lodash'

export default {
  extends: basic,
  computed: {
    currentSvg() {
      let [svg] = this.layer[this.currentState];
      return typeof svg === "function" ? svg.call(this, this.prop) : svg;
    },
    currentChange() {
      let [svg, fn] = this.layer[this.currentState];
      return fn;
    },
    currentSize() {
      let size = common
        .case(this.layer.size)
        .array(val => val)
        .function(val => val.call(this, this.prop))
        .default();
      if (!size) return null;
      let [width, height] = size;
      width = typeof width === "number" ? width + "px" : width;
      height = typeof height === "number" ? height + "px" : height;
      return [width, height];
    },
    currentRotate() {
      let rotate = common
        .case(this.layer.rotate)
        .number(val => val)
        .string(val => _.get(this.prop, val))
        .function(val => val.call(this, this.prop))
        .default();
      return typeof rotate === "number" ? rotate + "deg" : rotate;
    },
    currentStyle() {
      let style = Object.assign({}, this.basicStyle);
      if (this.currentSize) {
        Object.assign(style, {
          width: this.currentSize[0],
          height: this.currentSize[1]
        });
      }
      if (this.currentRotate) {
        Object.assign(style, {
          transform: `rotate(${this.currentRotate})`
        })
      }
      return style;
    }
  },
  mounted() {
    this.currentChange(this.prop, this.$el);
  },
  watch: {
    prop() {
      this.currentChange(this.prop, this.$el);
    }
  }
};
</script>

<style lang="stylus">
.mx-vector {
  &.is-notAuto {
    svg {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
